/*
 * @Author: zhaoxiangyu@
 * @Date: 2021-11-11 19:55:54
 * @LastEditors: 647355931@qq.com
 * @LastEditTime: 2021-12-18 15:25:26
 * @Description: file content
 */
import React from 'react';
import Sty from './Grid.module.css';
import '../../global/css/grid.scss';

export default function ItemCol(props) {
  const { span, colSpan, Height, removeBorder, addBorder } = props;
  const trueContent = ['top', 'left', 'right', 'bottom'];

  //  layout 子元素排列方式  默认垂直
  const computed = {
    boxSizing: 'border-box',
  };

  // removeBorder 删除指定的边框线 ['top','left','right','bottom']
  if (removeBorder && Array.isArray(removeBorder)) {
    removeBorder.forEach((v) => {
      if (trueContent.indexOf(v) !== -1) {
        computed['border-' + v] = 0;
      }
    });
  }
  // 判断颜色是否合法
  const testColor = (color) => {
    var re1 = /^#([0-9a-f]{6}|[0-9a-f]{3})$/i;
    var re2 =
      /^rgb\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\)$/i;
    var re3 =
      /^rgba\(([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,([0-9]|[0-9][0-9]|25[0-5]|2[0-4][0-9]|[0-1][0-9][0-9])\,(1|1.0|0.[0-9])\)$/i;
    return re2.test(color) || re1.test(color) || re3.test(color);
  };
  // 权值 先删除 后添加
  // 格式  ['v','color']  只有最后一个参数是颜色参数 不传会默认使用black
  // addBorder 添加一条指定的边框线

  if (addBorder && Array.isArray(addBorder)) {
    let color;
    // console.log('addBorder.length===> ', addBorder, addBorder.length);
    if (addBorder.length > 1 && testColor(addBorder[testColor.length - 1])) {
      // 判断颜色是否合法
      color = addBorder[testColor.length - 1];
      // 保存颜色值并且删除
      addBorder.pop();
    } else {
      color = 'black';
    }

    addBorder.forEach((v) => {
      if (trueContent.indexOf(v) !== -1) {
        computed['border-' + v] = '1px solid ' + color;
      }
    });
  }

  // Height 默认子节点的高度
  // console.log('props.children ==> ');
  var className;
  if (typeof props.children === 'string') {
    className = 'context';
  } else if (typeof props.children === 'object' && props.children.type === 'img') {
    className = 'img';
  } else if (typeof props.children === 'undefined') {
    className = 'empty';
  }

  const hasColSpan = {
    // Height 不存在取50
    height: colSpan ? (Height || 50) * colSpan + 'px' : 50 * (colSpan || 1) + 'px',
  };

  // console.log('hasColSpan===> ', hasColSpan, colSpan);

  return (
    <div className={`col-md-${span}`}>
      {className === 'img' ? (
        <div style={{ ...computed, ...hasColSpan }} className={`${Sty[className]} token`}>
          {props.children}
        </div>
      ) : (
        <span
          style={{ ...computed, ...hasColSpan }}
          className={`${Sty[className]} token`}
        >
          {props.children}
        </span>
      )}
    </div>
  );
}
